<template>
  <div
    class="jdf-node"
    :class="[`level-${data?.level ?? 0}`, { 'is-selected': selected }]"
    @contextmenu="handleContextMenu"
  >
    <!-- Restore basic structure -->
    <div class="node-header">
      <!-- Restore toggle button -->
      <button
          v-if="data?.hasChildren"
          class="expand-toggle"
          @click.stop="toggleExpansion"
      >
        {{ data?.isExpanded ? '[-]' : '[+]' }} <!-- Use optional chaining -->
      </button>
      <span class="tag-name">&lt;{{ data?.nodeName || 'N/A' }}&gt;</span> <!-- Display node name -->
    </div>

    <div class="node-content">
      <!-- Restore attribute rendering -->
      <div v-if="data?.attributes?.length" class="attributes">
        <div v-for="attr in displayAttributes" :key="attr.name" class="attribute">
          <span class="attr-name">{{ attr.name }}</span>
          <span class="attr-value" :title="attr.value">{{ truncateValue(attr.value) }}</span>
        </div>
        <div v-if="hasMoreAttributes" class="more-indicator">
          +{{ data.attributes.length - maxAttributes }} 更多...
        </div>
      </div>
      <!-- Restore text content rendering -->
      <div v-if="data?.textContent" class="text-content" :title="data.textContent">
        {{ truncateText(data.textContent) }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'; // Import computed
import type { NodeProps } from '@vue-flow/core';
import type { JDFAttribute } from '@/models/jdf'; // Import JDFAttribute type
import { useEditorStore } from '@/stores/editorStore'; // Import editor store

// Define emits
const emit = defineEmits(['node-context-menu']);

// Accept standard NodeProps
const props = defineProps<NodeProps>();

// Access data prop and selected prop (needed for class binding)
const { data, selected, id } = props;
const editorStore = useEditorStore(); // Initialize editor store

// Add logic for displaying attributes
const maxAttributes = 3;

const displayAttributes = computed(() => {
  // Ensure data and attributes exist before slicing
  return data?.attributes?.slice(0, maxAttributes) ?? []; 
});

const hasMoreAttributes = computed(() => {
  // Ensure data and attributes exist
  return (data?.attributes?.length ?? 0) > maxAttributes;
});

const truncateValue = (value: string) => {
  return value.length > 20 ? value.substring(0, 17) + '...' : value;
};

// Add text truncation logic
const truncateText = (text: string) => {
  // Use optional chaining for safety, although v-if should prevent this
  return (text?.length ?? 0) > 30 ? text.substring(0, 27) + '...' : text;
};

// Add toggle function
const toggleExpansion = () => {
  // Use props.id directly
  editorStore.toggleNodeExpansion(props.id); 
};

// Add context menu handler function
const handleContextMenu = (event: MouseEvent) => {
    // Construct an object similar to NodeMouseEvent
    const nodeEvent = {
        event: event,
        node: {
            id: props.id,
            data: props.data,
            // Add other necessary node properties if needed
        },
        // Add other NodeMouseEvent properties if required
    };
    // Emit the event upwards
    emit('node-context-menu', nodeEvent);
};

// No other logic needed for now

</script>

<style lang="scss" scoped>
/* Replace with original styles */
.jdf-node {
  padding: 8px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color);
  width: 200px;

  &.is-selected {
    border: 2px solid var(--el-color-primary); 
  }

  .node-header {
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--el-border-color);
    display: flex;
    align-items: center;

    .expand-toggle {
      background: none;
      border: none;
      padding: 0 4px 0 0;
      margin: 0;
      cursor: pointer;
      font-size: 0.9em;
      color: var(--el-text-color-secondary);
      line-height: 1;
      &:hover {
        color: var(--el-text-color-primary);
      }
    }

    .tag-name {
      font-weight: 600;
      color: var(--el-color-primary);
    }
  }

  .node-content {
    margin-top: 4px;

    .attributes {
      .attribute {
        display: flex;
        margin-bottom: 2px;
        font-size: 0.85em;

        .attr-name {
          font-weight: 600;
          margin-right: 4px;
          color: var(--el-color-success);

          &:after {
            content: '=';
            margin-left: 2px;
            color: var(--el-text-color-regular);
          }
        }

        .attr-value {
          color: var(--el-color-danger);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .more-indicator {
        font-size: 0.8em;
        color: var(--el-text-color-secondary);
        margin-top: 2px;
      }
    }

    .text-content {
      margin-top: 4px;
      font-size: 0.85em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--el-text-color-primary);
      font-style: italic;
    }
  }

  // 不同级别的节点使用不同的背景色
  @for $i from 0 through 5 {
    &.level-#{$i} {
      background-color: rgba(var(--el-color-primary-rgb), #{0.1 + $i * 0.05});
    }
  }
}
</style> 